<template>
  <view class="feedback-body">
    <text class="text-black">问题反馈和意见建议 <text style="color: red">*</text></text>
    <textarea
      placeholder="请描述您遇到的问题或对本产品的建议..."
      v-model="sendData.remark"
      class="feedback-textare"
      maxlength="-1"
    />

    <view class="image-title">
      <text class="text-black">上传问题截图<text class="text-grey"> (选填，最多可上传6张) </text> </text>
      <view class="text-grey">{{ imgs.length }}/6</view>
    </view>
    <view class="filepicker">
      <uni-file-picker
        file-mediatype="image"
        :limit="6"
        return-type="array"
        @select="select"
        @progress="progress"
        @success="success"
        @fail="fail"
        :auto-upload="false"
      >
      </uni-file-picker>
      <!-- 如不绑定服务空间，autoUpload默认为false且不可更改 -->
    </view>

    <text class="text-black">联系方式<text class="text-grey">(选填)</text> </text>
    <input class="feedback-input" v-model="sendData.mobile" placeholder="请输入您的手机号" />
    <view class="btn">
      <button :disabled="!sendData.remark" type="primary" @click="submitFeedback">提交</button>
    </view>
  </view>
</template>

<script>
import { uploadFile } from "@/api";
import { saveLeaveMsg } from "../api/feedback";
import uniFilePicker from "../components/uni-file-picker/components//uni-file-picker/uni-file-picker.vue";
export default {
  components: { uniFilePicker },
  data() {
    return {
      sendData: {
        remark: "", //反馈内容
        img: "", //图片
        mobile: "", //联系方式
        ancestors: 0,
        parentId: 0,
        receiveUserId: 0,
        // createDept: '1123598813738675201'
      },
      btnLoading: false,
      imgs: [],
    };
  },
  onLoad() {
    uni.setNavigationBarColor({
      frontColor: "#000000",
      backgroundColor: "#ffffff",
      animation: {
        duration: 400,
        timingFunc: "easeIn",
      },
    });
  },
  methods: {
    async submitFeedback() {
      try {
        const pam = { ...this.sendData };
        const { data, success, msg } = await saveLeaveMsg(pam);
        if (!success) throw new Error(msg);

        uni.navigateBack({
          success() {
            const timer = setTimeout(() => {
              clearTimeout(timer);
              uni.showToast({
                title: "提交成功",
                icon: "none",
              });
            }, 300);
          },
        });
      } catch (error) {
        console.error(error);
        const msg = error.length > 30 ? "失败" : error;
        uni.showToast({
          title: msg,
          icon: "none",
        });
      }
    },
    // 获取上传状态
    async select(e) {
      console.log("选择文件：", e);

      this.imgs = e.tempFiles;
      const urls = [];

      for (let i = 0; i < this.imgs.length; i++) {
        const result = await uploadFile(this.imgs[i]);
        console.log("uploadFile result>>", result);
        this.urls.push(result.url);
      }

      this.sendData.img = this.urls.join(",");
    },
  },
};
</script>

<style lang="scss" scoped>
.text-black {
  color: #303133;
  font-size: 32rpx;
}

.text-grey {
  color: #bcbcbc;
  font-size: 24rpx;
  margin-left: 15rpx;
}

.feedback-quick {
  padding-right: 10rpx;
  color: #606266;
  font-size: 32rpx;
}

.feedback-body {
  padding: 30rpx;
}

.feedback-textare {
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  height: 266rpx;
  color: #303133;
  font-size: 28rpx;
  line-height: 2em;
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx 30rpx;
  border-radius: 20rpx;
  background-color: white;
}

.feedback-input {
  font-size: 28rpx;
  color: #303133;
  background-color: white;
  border-radius: 20rpx;
  height: 100rpx;
  min-height: 100rpx;
  padding: 0 30rpx;
  margin-top: 30rpx;
  margin-bottom: 60rpx;
}

.image-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #606266;
}

.filepicker {
  margin-top: 30rpx;
  margin-bottom: 30rpx;
	background-color: white;
	padding: 20rpx;
}

.btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 30rpx 30rpx 60rpx 30rpx;
}
</style>
